<template>
	<view class="">
		<view class="con">
			<view class="head_box">
				<image :src="info.head_pic"></image>
			</view>
			<view class="nickname">
				{{info.nick_name}}
			</view>
			<view class="level">
				{{info.member_level_text+'LV.'+info.member_level}}
			</view>
			<view class="barcode">
				<tki-barcode ref="barcode" onval :val="code" :load-make="true" :opations="barOpations" />
			</view>
			<view class="code_txt">
				{{code}}
			</view>
			<view class="qrcode">
				<tki-qrcode  ref="qrcode" onval :val="code" :size="320" :load-make="true" :show-loading="false" />
			</view>
			<view class="datas">
				<view class="data_item">
					<view class="data_num">
						{{info.balance}}
					</view>
					<view class="">
						余额
					</view>
				</view>
				<view class="data_item">
					<view class="data_num">
						{{info.coupon}}
					</view>
					<view class="">
						优惠券
					</view>
				</view>
				<view class="data_item">
					<view class="data_num">
						{{info.health_point}}
					</view>
					<view class="">
						健康豆
					</view>
				</view>
				<view class="data_item">
					<view class="data_num">
						{{info.card}}
					</view>
					<view class="">
						卡
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import tkiBarcode from '@/components/tki-barcode/tki-barcode'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode'
	export default {
		data() {
			return {
				barOpations: {
					marginTop: 0,
					marginBottom: 0,
					marginLeft: 0,
					marginRight: 0,
				},
				info: uni.getStorageSync('info')
			}
		},
		components: {
			tkiBarcode,
			tkiQrcode
		},
		computed: {
			code() {

				const numbers = '0123456789'; // 数字集合

				// 生成前两位字母
				let result = 'No';


				// 生成接下来的 32 位数字
				for (let i = 0; i < 32; i++) {
					result += numbers.charAt(Math.floor(Math.random() * numbers.length));
				}

				return result
			}
		},
		mounted() {
		
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: red;

		.con {
			width: 85%;
			height: 64vh;
			padding: 12px;
			background-color: #fff;
			border-radius: 10px;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;

			.head_box {
				width: 65px;
				height: 65px;
				border-radius: 50%;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: -100rpx auto 0;
				overflow: hidden;

				image {
					width: 85%;
					height: 85%;
					border-radius: 50%;
				}
			}

			.nickname {
				text-align: center;
				font-size: 18px;
				margin-top: 4px;
			}

			.level {
				font-size: 12px;
				color: #e3b434;
				text-align: center;
			}

			.barcode {
				width: 95%;
				margin: 40rpx auto 0;
				text-align: center;
			}
			.code_txt{
				text-align: center;
				font-size: 10px;
				color: #aaa;
				margin-bottom: 30rpx;
			}
			.qrcode{
				text-align: center;
				padding-bottom: 80rpx;
				border-bottom: 1px dashed #aaa;
				.tki-qrcode{
					text-align: center;
				}
			}
			.datas{
				margin-top: 12px;
				display: flex;
				justify-content: space-around;
				font-size: 14px;
				.data_item{
					text-align: center;
					.data_num{
						margin-bottom: 10px;
					}
				}
			}
		}
	}
</style>